繼上一篇有提到onclick事件，
那今天我們就來說說跟他有類似功能的addEventListener其中的click事件吧~
接下來我們就來使用上一篇的範例，將onclick改為監聽事件
css

.button1_all{
    display: none;
}

html

<button class="button col-auto mt-4 ms-5 py-2 px-3" id="button1">button1</button>
  <div class="container ms-5 ps-4 button1_all" id="button1_all">
    <div class="row " id="row_1">
        <select class="col-12 col-md-3 me-2 mt-4 py-2 mb-2" id="uploadlist">
            <option>選擇檔案類型1</option>
        </select>
        <select class="col-12 col-md-3 me-2 mt-4 py-2 mb-2" id="get_key_value">
            <option>選擇檔案類型2</option>
        </select>
    </div>
  </div>

js

const button1=document.getElementById('button1');
const button1_all=document.getElementById('button1_all');
button1.addEventListener('click', function() {
button1_all.style.display = 'block';
});

最後的結果都一樣，但他們倆者之間的差距在於addEventListener可以為同一個元素添加多個事件監聽器。它不會覆蓋先前綁定的事件處理函數;而onclick只能綁定一個事件，新事件會覆蓋舊事件。